<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
	<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
	font-size: 12px !important;
}
.ui-growl {
right: 50%;

}
.gm-style-iw {
width: 300px; 
min-height: 150px;
}
</style>

	<script src="http://maps.google.com/maps/api/js?sensor=false&amp;v=3.4"
		type="text/javascript"></script>
	<script src="http://openlayers.org/api/OpenLayers.js"></script>
	<script src="js/proj4js-combined.js"></script>	
		
		
	<script type="text/javascript">
    var currentMarker = null;
    var markers = [];
    Proj4js.defs["EPSG:2322"] = "+proj=tmerc +lat_0=0 +lon_0=36 +k=1 +x_0=500000 +y_0=0 +ellps=intl +units=m +no_defs";
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 500
    });
    var contentString ="test";
    var directionsDisplay =new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    
  
    
    function drawDirection(latitude, longitude){
    	directionsDisplay =new google.maps.DirectionsRenderer({suppressMarkers: true});
        directionsService = new google.maps.DirectionsService();
        //directionsDisplay.suppressMarkers = true;
        var gmap = PF('map').getMap();
    	directionsDisplay.setMap(gmap);

    	var source=	new google.maps.LatLng("38.78706897793826", "35.585227590054274")	;
    	var destination=	new google.maps.LatLng(latitude, longitude)	;
    	var request = {
    		      origin: source,
    		      destination: destination,
    		      // Note that Javascript allows us to access the constant
    		      // using square brackets and a string value as its
    		      // "property."
    		      travelMode: google.maps.TravelMode.DRIVING
    	};
    	
    	directionsService.route(request, function(response, status) {
    	    if (status == google.maps.DirectionsStatus.OK) {
    	     directionsDisplay.setDirections(response);
    	     //alert(response.routes[0].legs[0].distance.text+ " "+response.routes[0].legs[0].duration.text);
    	     var a = '<div>uzaklık :'+response.routes[0].legs[0].distance.text+ ',<br/> \r\n '+' Sure :'+response.routes[0].legs[0].duration.text+'<br/> Adress : '+response.routes[0].legs[0].end_address+'</div>';
    	    // alert('a');
    	     openInfoWindow(a);
    	    }
    	  });
    }
    
    function openInfoWindow(info){
    	var gmap = PF('map').getMap();
    	var position = new google.maps.LatLng(document.getElementById('form:lat').value, document.getElementById('form:lng').value)
    	infowindow.setContent(info);
    	infowindow.setPosition(position);
    	infowindow.open(gmap);
    }
 
    function getMapParameter(){
    	var gmap = PF('map').getMap();
        document.getElementById('form:centerlat').value = gmap.center.lat();
        document.getElementById('form:centerlng').value = gmap.center.lng();
        document.getElementById('form:zoom').value = gmap.zoom;
     //   document.getElementById('form:lat').value = event.latLng.lat();
     //   document.getElementById('form:lng').value = event.latLng.lng();
    }
    
    function resetRota(){
    	directionsDisplay.setMap(null);
    	
    	//directionsDisplay.set('directions', null);
    }
    
    function doProjection(){
    	var lng = document.getElementById('form:lng').value;
    	var lat = document.getElementById('form:lat').value;
    	var pnt = new OpenLayers.LonLat(lng,lat);
    	pnt=pnt.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:2322'));
    	
  	
    	
    	document.getElementById('form:projectionlat').value = pnt.lat;
        document.getElementById('form:projectionlng').value = pnt.lon;
    	
    }
    
    function doProjectionFromGPS(x,y){
    	//x=x-0.0001;
    	//y=y-0.0001;
    	var pnt = new OpenLayers.LonLat(x,y);
    	pnt=pnt.transform(new OpenLayers.Projection('EPSG:2322'), new OpenLayers.Projection('EPSG:4326'));
    	
    	document.getElementById('form:manuelInputlat').value = pnt.lat-0.00012;
        document.getElementById('form:manuelInputlng').value = pnt.lon-0.00023;
    	
    }
    
    function hideDialog(){
    	PF('sendDialog').hide();
    }
    
    function handlePointClick(event) {
        if(currentMarker === null) {
            document.getElementById('form:lat').value = event.latLng.lat();
            document.getElementById('form:lng').value = event.latLng.lng();
            
            
            getMapParameter();
            
           currentMarker = new google.maps.Marker({
             position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
            });
 
            PF('map').addOverlay(currentMarker);
 
            PF('dlg').show();
            
           // currentMarker.setMap(null);
           // currentMarker = null;
        }   
    }
 
    function markerAddComplete() {
        var title = document.getElementById('form:address');
        currentMarker.setTitle(title.value);
        //title.value = "";
        // markers.push(currentMarker);
        currentMarker = null;
        PF('dlg').hide();
    }
 
    function cancel() {
        PF('dlg').hide();
        currentMarker.setMap(null);
        currentMarker = null;
 
        return false;
    }
    

    
    function setMapCenter(latitude, longitude) {
    	PF('map').getMap().setCenter(new google.maps.LatLng(latitude, longitude));
    	
    }
    
    function setZoom(zoom) {
    	PF('map').getMap().setZoom(zoom);
    }
</script>
</h:head>
<h:body>
	<h:form id="form">
		<h:inputHidden id="lat" value="#{navigator.lat}" />
		<h:inputHidden id="lng" value="#{navigator.lng}" />
		<h:inputHidden id="centerlat" value="#{navigator.centerlat}" />
		<h:inputHidden id="centerlng" value="#{navigator.centerlng}" />
		<h:inputHidden id="projectionlat" value="#{navigator.projectionlat}" />
		<h:inputHidden id="projectionlng" value="#{navigator.projectionlng}" />
		<h:inputHidden id="zoom" value="#{navigator.zoom}" />
		
		<p:layout fullPage="true">

			<p:layoutUnit position="north" size="100" header="Top" visible="false"
				resizable="true" closable="true" collapsible="true">

			</p:layoutUnit>

			<p:layoutUnit position="south" size="100" header="Bottom" visible="true"
				resizable="true" closable="true" collapsible="true">

			</p:layoutUnit>

			<p:layoutUnit position="west" size="300" header="Left" visible="true"
				resizable="true" closable="true" collapsible="true">

 <p:panel id="basic" header="Adres Arama"  style="margin-bottom:20px">
        <h:panelGrid columns="3">
        	<h:outputLabel value="İlçe"> </h:outputLabel>
        	<h:outputLabel value=":"> </h:outputLabel>
        	<p:selectOneMenu id="ilce" value="#{navigator.ilce}" style="width:150px;">
	           <f:selectItems value="#{navigator.ilceList}"> </f:selectItems>
	            <p:ajax event="change" update="mahalle" listener="#{navigator.ilceOnChange}" />
        	</p:selectOneMenu>
        	
        	<h:outputLabel value="Mahelle"> </h:outputLabel>
        	<h:outputLabel value=":"> </h:outputLabel>
        	<p:selectOneMenu id="mahalle" value="#{navigator.mahalle}" style="width:150px;">
	           <f:selectItems value="#{navigator.mahalleList}"> </f:selectItems>
	            <p:ajax event="change" update="sokak" listener="#{navigator.mahalleOnChange}" />
        	</p:selectOneMenu>
        	
        	<h:outputLabel value="Sokak"> </h:outputLabel>
        	<h:outputLabel value=":"> </h:outputLabel>
        	<p:selectOneMenu id="sokak" value="#{navigator.sokak}" style="width:150px;">
	           <f:selectItems value="#{navigator.sokakList}"> </f:selectItems>
	            <p:ajax event="change" update="bina" listener="#{navigator.sokakOnChange}" />
        	</p:selectOneMenu>
        	
        	<h:outputLabel value="Bina"> </h:outputLabel>
        	<h:outputLabel value=":"> </h:outputLabel>
        	<p:selectOneMenu id="bina" value="#{navigator.bina}" style="width:150px;">
	           <f:selectItems value="#{navigator.binaList}"> </f:selectItems>
	          </p:selectOneMenu>
	          
	        <p:commandButton value="Koordinat Bul" actionListener="#{navigator.getKapiNo}" update="messages"></p:commandButton>  
            <p:ajaxStatus style="width:16px;height:16px;">  
    		<f:facet name="start">  
        		<h:graphicImage value="js/ajaxloading.gif" />  
    		</f:facet>  
      
   			 <f:facet name="complete">  
        		<h:outputText value="" />  
 			   </f:facet>  
			</p:ajaxStatus>
        </h:panelGrid>
    </p:panel>
    
    <p:panel id="basic2" header="Koorinat Girişi"  style="margin-bottom:20px">
    		 <h:panelGrid columns="3">
        		<h:outputLabel value="Enlem"> </h:outputLabel>
        		<h:outputLabel value=":"> </h:outputLabel>
        		<p:inputText id="manuelInputlat" value="#{navigator.manuelInputlat}"></p:inputText>
        		
        		<h:outputLabel value="Boylam"> </h:outputLabel>
        		<h:outputLabel value=":"> </h:outputLabel>
        		<p:inputText id="manuelInputlng" value="#{navigator.manuelInputlng}"></p:inputText>
        		
        		<p:commandButton value="Isaretle" actionListener="#{navigator.addMarkerFromGPSData}" onclick="getMapParameter()" update="messages,map"></p:commandButton>  
        	</h:panelGrid>	
    </p:panel>

			</p:layoutUnit>

			<p:layoutUnit position="east" size="250" header="Right" visible="false"
				resizable="true" closable="true" collapsible="true" effect="drop">
				<center>
				<h:panelGrid id="panelGrid" columns="2" >
					<h:outputLabel value="Enlem"></h:outputLabel>
					<h:outputLabel value="#{navigator.lat}"></h:outputLabel>

					<h:outputLabel value="Boylam"></h:outputLabel>
					<h:outputLabel value="#{navigator.lng}"></h:outputLabel>

				</h:panelGrid>
</center>
				<p:commandButton value="Gonder"></p:commandButton>
			</p:layoutUnit>

			<p:layoutUnit position="center" header="Center">
               <center>
				<h:outputLabel value="Adress"></h:outputLabel>
				<h:inputText id="address" value="#{navigator.address}" size="100"></h:inputText>
				<p:commandButton action="#{navigator.searchAddress}" value="Ara"></p:commandButton>
				<p:commandButton action="#{navigator.clearMarkers}" onclick="getMapParameter();" update="map" value="Temizle"></p:commandButton>
				<p:commandButton onclick="getMapParameter();" action="#{navigator.setCenterZoom}" update="map" value="Rota Temizle"></p:commandButton>

				<p:growl id="messages" showDetail="true" sticky="false" globalOnly="false" />


				<p:gmap id="map" center="38.72956137445706, 35.47995459062804" zoom="13" fitBounds="true"
					type="HYBRID" style="width:1150px;height:550px"
					model="#{navigator.emptyModel}"
					onPointClick="handlePointClick(event);" widgetVar="map" >
					<p:ajax event="overlaySelect"
						listener="#{navigator.onMarkerSelect}"  update="messages,panelGrid,datatable" />
				</p:gmap>

</center>



				<p:dialog widgetVar="dlg" showEffect="fade" closable="false">

					<h:panelGrid columns="2">
						<h:outputLabel value="Bu nokta işaretlensin mi?" />


						<f:facet name="footer">
							<p:commandButton value="Isaretle"
								actionListener="#{navigator.addMarker}" update="messages,map"
								oncomplete="markerAddComplete()" onclick="doProjection()"/>
								
							<p:commandButton value="İncele"
								actionListener="#{navigator.investigatePoint}" update="messages,map"
								 onclick="doProjection()"/>	
								 
							<p:commandButton value="Rota Ciz"
								action="#{navigator.drawDirections}" update="messages"
								 />		 
							<p:commandButton value="Cancel" actionListener="#{navigator.cancelDialog}"    onclick="return cancel()" />
						</f:facet>
					</h:panelGrid>


				</p:dialog>
				
				<p:dialog widgetVar="sendDialog" showEffect="fade" closable="true" width="400">

					<p:dataTable id="datatable" var="item" value="#{navigator.marker.data}">
						<p:column headerText="İsim">
							<h:outputText value="#{item.name}" />
						</p:column>

						<p:column headerText="Özellik">
							<h:outputText value="#{item.value}" />
						</p:column>

				  </p:dataTable>


					<h:panelGrid columns="2">
						

						<f:facet name="footer">
							<p:commandButton value="Gönder"
								actionListener="#{navigator.sendCoordinate}" update="messages"
								oncomplete="hideDialog()" />
						
						

							
							
							<p:commandButton value="İptal" onclick="hideDialog()" />
						</f:facet>
					</h:panelGrid>


				</p:dialog>


			</p:layoutUnit>

		</p:layout>

	</h:form>

</h:body>
</html>
